<template>
  <div class="member-size-page xtx-center-size" v-loading="loading">
    <!-- 提示 -->
    <div class="tip">
      <p>最多可创建10个角色</p>
      <a href="javascript:;" @click="edit()">+ 新建尺码</a>
    </div>
    <!-- 尺码 -->
    <div class="item-size" v-for="item in list" :key="item.id">
      <div class="head">
        <span class="name">{{item.name}}</span>
        <span class="def" v-if="item.isDefault===1">默认尺码</span>
        <div class="btn">
          <a href="javascript:;" @click="edit(item)">编辑</a>
          <a class="red" href="javascript:;" @click="del(item)">删除</a>
        </div>
      </div>
      <div class="body">
        <span>性别 {{item.gender}}</span>
        <span>身高(cm) {{item.height}}</span>
        <span>体重(kg) {{item.bodyWeight}}</span>
        <span>肩宽(cm) {{item.shoulderWidth}}</span>
        <span>胸围(cm) {{item.chestCircumference}}</span>
        <span>腰围(cm) {{item.waistCircumference}}</span>
        <span>臀围(cm) {{item.hips}}</span>
        <span>脚长(cm) {{item.footSize}}</span>
        <span>脚围(cm) {{item.footCircumference}}</span>
      </div>
    </div>
    <!-- 新增尺码 -->
    <size-new ref="sizeNew" :item="currItem" @on-complete="optionalComplete"></size-new>
  </div>
</template>

<script>
import SizeNew from './components/size-new'
export default {
  name: 'member-size-page',
  components: { SizeNew },
  data () {
    return {
      loading: false,
      list: [],
      currItem: {}
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      this.loading = true
      await this.$sleep(500)
      const { data } = await this.$http.get('member/profile/property')
      this.list = data.result
      this.loading = false
    },
    del ({ id }) {
      this.$confirm({ text: '您确认删除该尺码吗？' }).then(async valid => {
        if (valid) {
          await this.$http.delete('member/profile/property/' + id)
          this.$message({ message: '删除尺码成功', type: 'success' })
          const index = this.list.find(item => item.id === id)
          this.list.splice(index, 1)
        }
      })
    },
    // 添加和修改
    edit (item) {
      if (item === undefined) {
        item = {}
      }
      this.currItem = item
      this.$nextTick(() => {
        this.$refs.sizeNew.open()
      })
    },
    // 添加和修改完毕
    optionalComplete (form) {
      const editItem = this.list.find(item => item.id === form.id)
      if (editItem) {
        for (const key in editItem) {
          editItem[key] = form[key]
        }
      } else {
        this.list.unshift(form)
      }
    }
  }
}
</script>

<style scoped lang='less'>
@import "./styles/size.less";
</style>
